<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img {
				width: 100px;
				height: 100px;
			}
			.transition2 {
				transition: all 2s;
				-webkit-transition: all 2s;
				-moz-transition: all 2s;
			}
			
			.transition3 {
				transition: all 3s;
				-webkit-transition: all 3s;
				-moz-transition: all 3s
			}
			.transform-sacle {
				opacity: 0;
				-webkit-transform-origin: 50% 50%;
				-webkit-transform: scale(.1);
				-moz-transform-origin: 50% 50%;
				-moz-transform: scale(.1);
				-ms-transform-origin: 50% 50%;
				-ms-transform: scale(.1);
				-o-transform-origin: 50% 50%;
				-o-transform: scale(.1);
				transform-origin: 50% 50%;
				transform: scale(.1);
			}
			
			
			.transform-rotateX90 {
				-webkit-transform-origin: 50% 50%;
				-webkit-transform: rotateX(90deg);
				-moz-transform-origin: 50% 50%;
				-moz-transform: rotateX(90deg);
				-ms-transform-origin: 50% 50%;
				-ms-transform: rotateX(90deg);
				-o-transform-origin: 50% 50%;
				-o-transform: rotateX(90deg);
				transform-origin: 50% 50%;
				transform: rotateX(90deg);
			}
			.transform-rotateY90 {
				-webkit-transform-origin: 50% 50%;
				-webkit-transform: rotateY(90deg);
				-moz-transform-origin: 50% 50%;
				-moz-transform: rotateY(90deg);
				-ms-transform-origin: 50% 50%;
				-ms-transform: rotateY(90deg);
				-o-transform-origin: 50% 50%;
				-o-transform: rotateY(90deg);
				transform-origin: 50% 50%;
				transform: rotateY(90deg);
			}
			.transform-rotateZ90 {
				opacity: 0;
				-webkit-transform-origin: 50% 50%;
				-webkit-transform: rotateZ(90deg);
				-moz-transform-origin: 50% 50%;
				-moz-transform: rotateZ(90deg);
				-ms-transform-origin: 50% 50%;
				-ms-transform: rotateZ(90deg);
				-o-transform-origin: 50% 50%;
				-o-transform: rotateZ(90deg);
				transform-origin: 50% 50%;
				transform: rotateZ(90deg);
			}
			.transform-sacle-rotateZ {
				opacity: 0;
				-webkit-transform-origin: 50% 50%;
				-webkit-transform: rotateZ(360deg) scale(.1);
				-moz-transform-origin: 50% 50%;
				-moz-transform: rotateZ(360deg) scale(.1);
				-ms-transform-origin: 50% 50%;
				-ms-transform: rotateZ(360deg) scale(.1);
				-o-transform-origin: 50% 50%;
				-o-transform: rotateZ(360deg) scale(.1);
				transform-origin: 50% 50%;
				transform: rotateZ(360deg) scale(.1);
			}
			
			.transform-sacle-rotateX {
				opacity: 0;
				-webkit-transform-origin: 50% 50%;
				-webkit-transform: rotateX(360deg) scale(.1);
				-moz-transform-origin: 50% 50%;
				-moz-transform: rotateX(360deg) scale(.1);
				-ms-transform-origin: 50% 50%;
				-ms-transform: rotateX(360deg) scale(.1);
				-o-transform-origin: 50% 50%;
				-o-transform: rotateX(360deg) scale(.1);
				transform-origin: 50% 50%;
				transform: rotateX(360deg) scale(.1);
			}
			
			.transform-sacle-rotateY {
				opacity: 0;
				-webkit-transform-origin: 50% 50%;
				-webkit-transform: rotateY(360deg) scale(.1);
				-moz-transform-origin: 50% 50%;
				-moz-transform: rotateY(360deg) scale(.1);
				-ms-transform-origin: 50% 50%;
				-ms-transform: rotateY(360deg) scale(.1);
				-o-transform-origin: 50% 50%;
				-o-transform: rotateY(360deg) scale(.1);
				transform-origin: 50% 50%;
				transform: rotateY(360deg) scale(.1);
			}
			
			.transform-sacle-rotateZ {
				opacity: 0;
				-webkit-transform-origin: 50% 50%;
				-webkit-transform: rotateZ(360deg) scale(.1);
				-moz-transform-origin: 50% 50%;
				-moz-transform: rotateZ(360deg) scale(.1);
				-ms-transform-origin: 50% 50%;
				-ms-transform: rotateZ(360deg) scale(.1);
				-o-transform-origin: 50% 50%;
				-o-transform: rotateZ(360deg) scale(.1);
				transform-origin: 50% 50%;
				transform: rotateZ(360deg) scale(.1);
			}
			
			
			
			.transform-sacle-rotateX90 {
				opacity: 0;
				-webkit-transform-origin: 50% 50%;
				-webkit-transform: rotateX(90deg) scale(.1);
				-moz-transform-origin: 50% 50%;
				-moz-transform: rotateX(90deg) scale(.1);
				-ms-transform-origin: 50% 50%;
				-ms-transform: rotateX(90deg) scale(.1);
				-o-transform-origin: 50% 50%;
				-o-transform: rotateX(90deg) scale(.1);
				transform-origin: 50% 50%;
				transform: rotateX(90deg) scale(.1);
			}
			
			.transform-sacle-rotateY90 {
				opacity: 0;
				-webkit-transform-origin: 50% 50%;
				-webkit-transform: rotateY(90deg) scale(.1);
				-moz-transform-origin: 50% 50%;
				-moz-transform: rotateY(90deg) scale(.1);
				-ms-transform-origin: 50% 50%;
				-ms-transform: rotateY(90deg) scale(.1);
				-o-transform-origin: 50% 50%;
				-o-transform: rotateY(90deg) scale(.1);
				transform-origin: 50% 50%;
				transform: rotateY(90deg) scale(.1);
			}
			
			.transform-sacle-rotateZ90 {
				opacity: 0;
				-webkit-transform-origin: 50% 50%;
				-webkit-transform: rotateZ(90deg) scale(.1);
				-moz-transform-origin: 50% 50%;
				-moz-transform: rotateZ(90deg) scale(.1);
				-ms-transform-origin: 50% 50%;
				-ms-transform: rotateZ(90deg) scale(.1);
				-o-transform-origin: 50% 50%;
				-o-transform: rotateZ(90deg) scale(.1);
				transform-origin: 50% 50%;
				transform: rotateZ(90deg) scale(.1);
			}
		</style>
	</head>

	<body>
		<div style="display: flex; justify-content: space-between;flex-wrap: wrap;">
			<div class="picture-animation">
				<p>transform-sacle</p>
				<img class="transition2 transform-sacle" src="img/a2.png" />
				<img class="transition2 transform-sacle" src="img/a3.png" />
				<img class="transition2 transform-sacle" src="img/a4.png" />
				<img class="transition2 transform-sacle" src="img/a5.png" />
			</div>
			<hr />
			<div class="picture-animation">
				<p>transform-sacle-rotateX90</p>
				<img class="transition3 transform-sacle-rotateX90" src="img/a1.png" />
				<img class="transition3 transform-sacle-rotateX90" src="img/a3.png" />
				<img class="transition3 transform-sacle-rotateX90" src="img/a4.png" />
				<img class="transition3 transform-sacle-rotateX90" src="img/a5.png" />
			</div>
			<hr />

			<div class="picture-animation">
				<p>transform-sacle-rotateX</p>
				<img class="transition3 transform-sacle-rotateX" src="img/a1.png" />
				<img class="transition3 transform-sacle-rotateX" src="img/a3.png" />
				<img class="transition3 transform-sacle-rotateX" src="img/a4.png" />
				<img class="transition3 transform-sacle-rotateX" src="img/a5.png" />
			</div>
			<hr />
			<div class="picture-animation">
				<p>transform-sacle-rotateY</p>
				<img class="transition3 transform-sacle-rotateY" src="img/a1.png" />
				<img class="transition3 transform-sacle-rotateY" src="img/a3.png" />
				<img class="transition3 transform-sacle-rotateY" src="img/a4.png" />
				<img class="transition3 transform-sacle-rotateY" src="img/a5.png" />
			</div>
			<hr />
			<div class="picture-animation">
				<p>transform-sacle-rotateZ</p>
				<img class="transition3 transform-sacle-rotateZ" src="img/a1.png" />
				<img class="transition3 transform-sacle-rotateZ" src="img/a3.png" />
				<img class="transition3 transform-sacle-rotateZ" src="img/a4.png" />
				<img class="transition3 transform-sacle-rotateZ" src="img/a5.png" />
			</div>
			<hr />
			<div class="picture-animation">
				<p>transform-rotateX90</p>
				<img class="transition3 transform-rotateX90" src="img/a1.png" />
				<img class="transition3 transform-rotateX90" src="img/a3.png" />
				<img class="transition3 transform-rotateX90" src="img/a4.png" />
				<img class="transition3 transform-rotateX90" src="img/a5.png" />
			</div>

			<hr />
			<div class="picture-animation">
				<p>transform-sacle-rotateY90"</p>
				<img class="transition3 transform-sacle-rotateY90" src="img/a1.png" />
				<img class="transition3 transform-sacle-rotateY90" src="img/a3.png" />
				<img class="transition3 transform-sacle-rotateY90" src="img/a4.png" />
				<img class="transition3 transform-sacle-rotateY90" src="img/a5.png" />
			</div>
			<hr />
			<div class="picture-animation">
				<p>transform-rotateY90"</p>
				<img class="transition3 transform-rotateY90" src="img/a1.png" />
				<img class="transition3 transform-rotateY90" src="img/a3.png" />
				<img class="transition3 transform-rotateY90" src="img/a4.png" />
				<img class="transition3 transform-rotateY90" src="img/a5.png" />
			</div>
			<hr />
			<div class="picture-animation">
				<p>transform-sacle-rotateZ90</p>
				<img class="transition3 transform-sacle-rotateZ90" src="img/a1.png" />
				<img class="transition3 transform-sacle-rotateZ90" src="img/a3.png" />
				<img class="transition3 transform-sacle-rotateZ90" src="img/a4.png" />
				<img class="transition3 transform-sacle-rotateZ90" src="img/a5.png" />
			</div>
			<hr />
			<div class="picture-animation">
				<p>transform-rotateZ</p>
				<img class="transition3 transform-rotateZ90" src="img/a1.png" />
				<img class="transition3 transform-rotateZ90" src="img/a3.png" />
				<img class="transition3 transform-rotateZ90" src="img/a4.png" />
				<img class="transition3 transform-rotateZ90" src="img/a5.png" />
			</div>
		</div>
		<img class=" transform-rotateZ90" src="img/a5.png" />
	</body>

</html>
<script src="../jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/*
	 * showActive();
	 * 		参数一： 元素Dom
	 * 		参数二： 每个元素执行动画间隔时间
	 * 		参数三： 初始执行动画延迟时间
	 * 		参数四： 增加或删除动画或过渡值
	 * 		参数五： 当为true的时候增加动画或过渡class值，false移除class,true感觉没必要，
	 * 
	 */
	showActive($(".transition2"), 200, 0, "transform-sacle", false);
	showActive($(".transition3"), 200, 0, "transform-sacle-rotateX", false);
	showActive($(".transition3"), 200, 0, "transform-sacle-rotateY", false);
	showActive($(".transition3"), 200, 0, "transform-sacle-rotateZ", false);
	showActive($(".transition3"), 200, 0, "transform-sacle-rotateX90", false);
	showActive($(".transition3"), 200, 0, "transform-sacle-rotateY90", false);
	showActive($(".transition3"), 200, 0, "transform-sacle-rotateZ90", false);
	showActive($(".transition3"), 200, 0, "transform-rotateX90", false);
	showActive($(".transition3"), 200, 0, "transform-rotateY90", false);
	showActive($(".transition3"), 200, 0, "transform-rotateZ90", false);
	function showActive(ele, intervalTime, initDelayTime, className, isTrue) {
		setTimeout(function() {
			var index = 0;
			var set = setInterval(function() {
				if(isTrue) {
					ele.eq(index).addClass(className);
					index++;
					if(index >= ele.length) {
						clearInterval(set);
					}
				} else {
					ele.eq(index).removeClass(className);
					index++;
					if(index >= ele.length) {
						clearInterval(set);
					}
				}
			}, intervalTime);
		}, initDelayTime);
	}
</script>